<template>
    <rx-dialog :showok="false"  @cancel="cancel" :canceltext="$ti18('rxForm.closeBtn','关闭')">
        <rx-layout class="mylayouts">
            <div slot="center">
                <a-descriptions :layout="'vertical'">
                    <a-descriptions-item :label="i18n('stepOne','1.路由访问')">
                        <span style="margin-left: 2px;">{{url}}</span>
                    </a-descriptions-item>
                </a-descriptions>
                <a-descriptions :layout="'vertical'">
                    <a-descriptions-item :label="i18n('stepTwo','2.列表中使用')">
                        <div  v-html="listOpen"> </div>
                    </a-descriptions-item>
                </a-descriptions>
                <a-descriptions :layout="'vertical'">
                    <a-descriptions-item :label="i18n('stepThree','3.开发中使用')">
                        <div  v-html="devOpen"> </div>
                    </a-descriptions-item>
                </a-descriptions>
                <a-descriptions :layout="'vertical'">
                    <a-descriptions-item :label="i18n('stepFour','4.页签访问')">
                        <span style="margin-left: 2px;">{{tabUrl}}</span>
                    </a-descriptions-item>
                </a-descriptions>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {Util, RxDialog, RxLayout} from "@lowcode/jpaas-common-lib";
import FormCustomApi from "@/api/form/core/formCustom";

export default {
    name: "FormCustomQueryHelp",
    props: ["pkId", "layerid", "destroy"],
    components: {
        RxDialog,
        RxLayout
    },
    data() {
        return {
            formCustom:"",
            url:"",
            listOpen:"",
            devOpen:"",
            tabUrl:"",
        }
    },
    created() {
        this.loadData();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCustom", key);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        loadData() {
            if (!this.pkId) {
                return;
            }
            FormCustomApi.get(this.pkId).then(res=>{
                if(res && res.success){
                    this.formCustom=res.data;
                    this.initHelp();
                }
            });
        },
        //初始化帮助
        initHelp(){
            var params=[];
            var parameter ="";
            var paramStr="";
            if(this.formCustom.params){
                params=JSON.parse(this.formCustom.params);
            }
            for (var i = 0; i < params.length; i++) {
                parameter += params[i].value +'=${' + params[i].value + '}&';
                paramStr+=params[i].value+":'${"+params[i].value+"}',"
            }
            parameter = parameter.substring(0, parameter.length - 1);
            paramStr = paramStr.substring(0, paramStr.length - 1);
            //路由方式
            this.url="/FormCustomView/"+this.formCustom.alias;
            if(parameter){
                this.url+="?"+parameter;
            }

            //列表中使用
            this.listOpen = `
              <span>`
              + this.i18n('useCase','使用案例：在列表中打开页面定制') + `<br/>`
              + this.i18n('onlineDoc','线上文档：') + `<a href="https://alidocs.dingtalk.com/i/p/Dnb9XJlQxLaGyAp7pLmkQwq0Vo3g2z2g" target="_blank">https://alidocs.dingtalk.com/i/p/Dnb9XJlQxLaGyAp7pLmkQwq0Vo3g2z2g</a><br/> </span><br/>`
              + this.i18n('codeFollow','代码如下：') + `<br/>
              &emsp;var params={${paramStr}};<br/>
              &emsp; this.openCustomPage("${this.formCustom.alias}",params,"标题",{max:true,shade:true,width:200,height:200},function(action,data){
                console.log(data)
            })`;


            this.devOpen = `
          <span>`
            + this.i18n('useCase','使用案例：在列表中打开页面定制') + `<br/>
            <sapn>` + this.i18n('popupCompo','弹窗组件(Util.open)线上文档：') + `<a href="https://alidocs.dingtalk.com/i/p/Dnb9XJlQxLaGyAp7pLmkQP8lgZMkYz2g" target="_blank">https://alidocs.dingtalk.com/i/p/Dnb9XJlQxLaGyAp7pLmkQP8lgZMkYz2g</a></sapn><br/>`
            + this.i18n('introduce','在开发页面中引入：') + `import FormCustomView from "@/views/modules/form/core/formComponent/FormCustomView";<br/>`
            + this.i18n('codeFollow','代码如下：') + `<br/></span>
            <pre>
    import { Util } from 'jpaas-common-lib';
    var params={${paramStr}};
    var config = {
        curVm: this,
        //` + this.i18n('codeFollow2','窗口调整大小(需注释 max:true)') + `
        //widthHeight: ['800px', '600px'],
        max:true,
        component: FormCustomView,
        title: ` + this.i18n('list.customPage','页面定制') + `,
        data: {
            alias:"${this.formCustom.alias}",
            params: JSON.stringify(params)
        }
    };
    Util.open(config, function (action) {
        if (action != 'ok') return;
    })
            </pre>
              `;
              ;
            //页签
            this.tabUrl="/custom/FormCustomView/"+this.formCustom.alias;
            if(parameter){
                this.tabUrl+="?"+parameter;
            }

        }
    }
}
</script>

<style scoped>
.mylayouts >>> .ant-descriptions-item > span.ant-descriptions-item-label {
    font-weight: bold;
}
</style>